<template>
  <div>
    <router-view v-if="$route.matched.length > 2" />
    <div v-show="$route.matched.length < 3">
      <CommonTablePage ref="commonTablePage" is-single-row hidden1920 permission-code="" :query-config="setQueryConfig">
        <template #query>
          <el-col v-for="item in 2" :key="item" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
            <el-form-item label="用户名">
              <el-input v-model="queryForm.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </template>
        <template #button>
          <el-button v-permission="''" type="primary" @click="handleToFormPage('ADD')">新增</el-button>
          <el-button v-permission="''" type="primary" @click="importVisible = true">导入</el-button>
        </template>
        <template #column>
          <el-table-column prop="" label="姓名" align="center" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column prop="" label="现住址" align="center" :show-overflow-tooltip="true" min-width="140" />
          <el-table-column prop="" label="筛查日期" align="center" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <span v-permission="''" class="primaryButton" @click="handleToFormPage('VIEW', scope.row)">查看详情</span>
              <el-popconfirm title="确认删除该条数据？" icon-color="red" @confirm="handleDelete(scope.row.id)">
                <span slot="reference" v-permission="''" class="dangerButton">删除</span>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </CommonTablePage>
      <!-- 导入弹窗 -->
      <el-dialog v-dialogDrag append-to-body title="医疗机构导入" :visible.sync="importVisible" width="40%">
        <el-upload ref="upload" class="w100_Upload" drag multiple action="" :http-request="handleImportFiles" :file-list="fileList">
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button style="float: left" @click="handleDownloadTemp">
            <i class="el-icon-download" />
            下载模板
          </el-button>
          <el-button type="primary" @click="handelCloseImportDia">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CommonTablePage from '@/components/CommonTablePage';
import useExportExcel from '@/utils/exportExcel';
import { handleTypeStr } from '@/constant';
import { formatQuery } from '@/utils';

export default {
  components: { CommonTablePage },
  data() {
    return {
      queryForm: this.setQueryConfig(true).params,
      importVisible: false,
      fileList: [],
      handleType: '',
      handleTypeStr
    };
  },
  beforeRouteUpdate(to, from, next) {
    if (to.name === 'firstMenuForm') {
      to.meta.title = '菜单一' + handleTypeStr[this.handleType]; // 更新tagView对应的文案：新增、查看、编辑
    }
    next();
  },
  methods: {
    /**
     * @param {boolean} reset
     *  true:重置表单，初始化默认值
     *  false:格式化表单 比如处理数组等，不然接口会报错
     */
    setQueryConfig(reset) {
      const params = reset ? {
        name: '',
        areaCode: ''
      } : formatQuery(this.queryForm);
      if (reset) this.queryForm = params;
      return {
        params
        // api:listQuery
        // callback: (value) => {}
      };
    },
    // 导出
    handleExportTable() {
      useExportExcel({
        // requestApi: ,
        fileName: 'xxx',
        queryForm: this.setQueryConfig().params
      });
    },
    // 删除
    handleDeleteRow(id) {
      // this.$refs.commonTablePage.handleDelete(API.deleteOrgDetail, { id }, () => {});
    },
    handleToFormPage(type, row = {}) {
      const { id, name } = row;
      this.handleType = type;
      this.$router.push({
        path: `${this.$route.path}/form`,
        query: { id, type, name }
      });
    },
    handleDownloadTemp() {},
    handelCloseImportDia() {
      this.importVisible = false;
      this.$refs.upload.uploadFiles = [];
    },
    handleImportFiles({ file }) {
      // const formData = new FormData();
      // const deleteFile = () => {
      //   const files = this.$refs.upload.uploadFiles;
      //   files.splice(files.length - 1, 1);
      // };
      // formData.append('file', file);
      // importList(formData).then(({ success }) => {
      //   if (success) {
      //     this.$message({
      //       message: '导入成功！',
      //       type: 'success'
      //     });
      //     this.$refs.commonTablePage.getTableList();
      //   } else {
      //     deleteFile();
      //   }
      // }).catch(() => {
      //   deleteFile();
      // });
    }
  }
};
</script>

<style lang="scss"></style>
